<template>
	<view class="container">
		<fu-navbar title="选择维修组成员" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="list">
			<block v-for="(data, index) in list" :key="index">
				<view class="padding-lr-24 padding-tb-16">{{data.initial}}</view>
				<view class="section" v-for="(item, childx) in data.data" :key="childx" @click="select(item)">
					<image src="../../../static/images/select-action.png" class="select" mode="aspectFill" v-if="selectedItems.findIndex(selectedItem => selectedItem.id === item.id) !== -1"></image>
					<image src="../../../static/images/select.png" class="select" mode="aspectFill" v-else></image>
					<image src="../../../static/images/icon22.png" class="icon" mode="aspectFill"></image>
					<view class="info">
						<view class="name text-ellipsis">{{item.employeeName}}</view>
						<view class="juese text-ellipsis">{{item.roleName}}</view>
					</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>
		<view class="btn-wrap">
			<view class="btn" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import fuEmptyUi from '@/components/fu-empty-ui/fu-empty-ui.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import { pinyin } from '@/common/utils/convertPinyin.js';
export default {
	components: {
		fuNavbar,
		fuEmptyUi,
		uniLoadMore
	},
	data() {
		return {
			list: [],
			isInit: false,
			page: 1,
			status: 'more',
			id: 0,
			info: {},
			orderId: 0,
			array: [],
			type: '',
			repStartTime: '',
			isClick: false,
			selectedItems: [], // 存储选中的人员
		}
	},
	onLoad(option) {
		this.orderId = option.orderId || 0
		this.type = option.type || ''
		this.repStartTime = option.repStartTime || ''
		this.getList();
		
		const eventChannel = this.getOpenerEventChannel();
		  eventChannel.on('acceptData', (data) => {
			this.selectedItems = data.selectedItems || []
		});
	},
	onPullDownRefresh() {
		this.status = 'more';
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	methods: {
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.ruleFreeTimeList, {
				pageNum: this.page,
				pageSize: 10,
				employeeTime: this.repStartTime,
			}).then(res => {
				if (res.data.code == 9100) {
					let total = res.data.info.total
					let data = res.data.info.rows
					if (this.page == 1) {
						this.list = [];
						this.array = [];
					}
					this.array = this.array.concat(data)
					this.list = this.sortContacts(this.array)
					if (this.array.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		},
		select(item) {
			const index = this.selectedItems.findIndex(i => i.id === item.id);
			if (index > -1) {
			  // 如果已经选中，则移除
			  this.selectedItems.splice(index, 1);
			} else {
			  // 如果未选中，则添加
			  this.selectedItems.push(item);
			}
			this.info = item; // 如果您还需要保留info作为当前选中的item，可以这样设置
		},
		submit() {
			if (this.isClick) return;
			uni.navigateBack({
				delta: 1,
				success: () => {
				    uni.$emit('refreshPreviousPage', { data: this.selectedItems });
				}
			})
		},
		/** JS 按 A-Z 排序通讯录(中文、英文、特殊字符)
		 * @param arrList 需要排序的数组
		 * @param char 指定排序的字段
		 * @param isAll 是否显示全部类型(true.A ~ Z全部显示 false.只显示已有的值)
		 * @returns {*[]|null} 返回结果 { initial: "", data: [] }
		 */
		sortContacts(arrList, char = "employeeName", isAll = false) {
		  if (!String.prototype.localeCompare) return null;
		  const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ#".split(""); // ABCDEFGHIJKLMNOPQRSTUVWXYZ
		  const zh = "阿八嚓哒妸发旮哈*讥咔垃痳拏噢妑七呥涩它**穵夕丫帀".split("");
		  const result = []; // 最终数据
		  let curr; // 当前数据循环
		  for (let i = 0; i < letters.length; i++) {
		    curr = { initial: letters[i], data: [] }; // 字母对象，data数据
		    arrList.forEach(item => {
		      const initial = item[char].charAt(0); // 截取第一个字符
		      // 首字符是英文
		      if (initial === letters[i] || initial === letters[i].toLowerCase()) curr.data.push(item);
		      // 判断是否无汉字，是否中文
		      if (zh[i] !== "*" && this.isChinese(initial)) {
		        const chinaName = pinyin.getFullChars(initial).charAt(0); // 直接使用 pinyin 中方法
		        if (chinaName === letters[i] || chinaName === letters[i].toLowerCase()) curr.data.push(item); // 首字符是英文
		      }
		      // 是特殊字符#
		      if (letters[i] === "#" && !this.isChar(initial) && !this.isChinese(initial)) curr.data.push(item);
		    });
		    if (isAll) {
		      result.push(curr);
		    } else if (curr.data.length > 0) {
		      result.push(curr);
		    }
		  }
		  return result;
		},
		isChinese(e) {
		  // 是否为中文
		  const reg = /[^\u4E00-\u9FA5]/;
		  if (reg.test(e)) return false;
		  return true;
		},
		isChar(e) {
		  // 是否为字符
		  const reg = /[A-Za-z]/;
		  if (!reg.test(e)) return false;
		  return true;
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f2f2f2;
}
.list {
	padding-top: 24rpx;
	overflow: hidden;
	.section {
		background-color: #fff;
		padding: 24rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		.select {
			width: 44rpx;
			height: 44rpx;
			margin-right: 24rpx;
		}
		.icon {
			width: 68rpx;
			height: 68rpx;
			margin-right: 24rpx;
		}
		.info {
			.name {
				font-size: 32rpx;
			}
			.juese {
				color: #7b7b7b;
				font-size: 26rpx;
				margin-top: 8rpx;
			}
		}
	}
}
.btn-wrap {
	height: 160rpx;
	.btn {
		position: fixed;
		bottom: 44rpx;
		width: 88%;
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 98rpx;
		background-color: #1372a7;
		text-align: center;
		line-height: 98rpx;
		text-align: center;
		font-size: 38rpx;
		color: #fff;
		border-radius: 12rpx;
		z-index: 9;
	}
}
</style>